import React from 'react';
import {
  Modal,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Pressable,
  Platform,
} from 'react-native';
import { COLORS } from '../styles/constants';

const PermissionsModal = React.memo(function PermissionsModal({ visible, onAllow, onDeny }) {
  const handleAllow = () => {
    if (onAllow) {
      onAllow();
    }
  };

  const handleDeny = () => {
    if (onDeny) {
      onDeny();
    }
  };

  // iOS使用"none"动画类型以获得更好的性能，Android使用"fade"
  const animationType = Platform.OS === 'ios' ? 'none' : 'fade';

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType={animationType}
      statusBarTranslucent={true}
      onRequestClose={handleDeny}
    >
      <View style={styles.backdrop}>
        <View style={styles.box}>
          <Text style={styles.title}>需要应用权限</Text>
          <Text style={styles.desc}>
            为了提供完整的旅游导览服务，需要以下权限：
          </Text>
          <View style={styles.permissionsList}>
            <View style={styles.permissionItem}>
              <Text style={styles.permissionIcon}>📍</Text>
              <View style={styles.permissionText}>
                <Text style={styles.permissionTitle}>定位权限</Text>
                <Text style={styles.permissionDesc}>
                  识别当前城市，提供附近景点推荐
                </Text>
              </View>
            </View>
            <View style={styles.permissionItem}>
              <Text style={styles.permissionIcon}>🎤</Text>
              <View style={styles.permissionText}>
                <Text style={styles.permissionTitle}>麦克风权限</Text>
                <Text style={styles.permissionDesc}>
                  提供语音导览和语音交互服务
                </Text>
              </View>
            </View>
          </View>
          <View style={styles.row}>
            {Platform.OS === 'ios' ? (
              // iOS使用Pressable获得更好的性能和触摸响应
              <>
                <Pressable
                  onPress={handleDeny}
                  style={({ pressed }) => [
                    styles.btn,
                    styles.btnGhost,
                    pressed && styles.btnPressed,
                  ]}
                  hitSlop={8}
                >
                  <Text style={styles.btnGhostText}>拒绝</Text>
                </Pressable>
                <Pressable
                  onPress={handleAllow}
                  style={({ pressed }) => [
                    styles.btn,
                    styles.btnPrimary,
                    pressed && styles.btnPressed,
                  ]}
                  hitSlop={8}
                >
                  <Text style={styles.btnPrimaryText}>允许</Text>
                </Pressable>
              </>
            ) : (
              // Android使用TouchableOpacity
              <>
                <TouchableOpacity
                  activeOpacity={0.6}
                  onPress={handleDeny}
                  style={[styles.btn, styles.btnGhost]}
                  hitSlop={8}
                >
                  <Text style={styles.btnGhostText}>拒绝</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  activeOpacity={0.6}
                  onPress={handleAllow}
                  style={[styles.btn, styles.btnPrimary]}
                  hitSlop={8}
                >
                  <Text style={styles.btnPrimaryText}>允许</Text>
                </TouchableOpacity>
              </>
            )}
          </View>
        </View>
      </View>
    </Modal>
  );
});

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.35)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: '80%',
    maxWidth: 400,
    backgroundColor: COLORS.white,
    borderRadius: 12,
    padding: 20,
    shadowColor: COLORS.shadow,
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: '700',
    color: COLORS.text.primary,
    marginBottom: 8,
  },
  desc: {
    color: COLORS.text.tertiary,
    lineHeight: 20,
    marginBottom: 12,
  },
  permissionsList: {
    marginBottom: 12,
  },
  permissionItem: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 12,
  },
  permissionIcon: {
    fontSize: 24,
    marginRight: 12,
    marginTop: 2,
  },
  permissionText: {
    flex: 1,
  },
  permissionTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: COLORS.text.secondary,
    marginBottom: 2,
  },
  permissionDesc: {
    fontSize: 13,
    color: COLORS.text.tertiary,
    lineHeight: 18,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 4,
  },
  btn: {
    paddingHorizontal: 24,
    paddingVertical: 14,
    borderRadius: 8,
    marginLeft: 12,
    minWidth: 80,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 44, // iOS 推荐的最小触摸区域
  },
  btnGhost: {
    backgroundColor: COLORS.background.secondary,
  },
  btnGhostText: {
    color: COLORS.text.secondary,
  },
  btnPrimary: {
    backgroundColor: COLORS.primary,
  },
  btnPrimaryText: {
    color: '#fff',
    fontWeight: '600',
  },
  btnPressed: {
    opacity: 0.7,
  },
});

export default PermissionsModal;
